import { useEffect, useState } from 'react';
import { Transfer, Tree } from 'antd';

export interface TreeData {
    /**树节点显示的内容 */
    title: string

    /**树节点的值 */
    key: string

    /**禁用节点选中和复选框选择 */
    disabled?: boolean

    /**设置节点是否可被选中 */
    selectable?: boolean

    /**禁用节点复选框 */
    disableCheckbox?: boolean

    /**当前树节点的子节点 */
    children?: TreeData[]
}

interface Props {
    /**穿梭框左侧的树形控件数据 */
    treeData: TreeData[],

    /**穿梭框的默认值 */
    value?: any[]

    /**用于触发表单值的更新 */
    onChange?: Function
}

const TreeTransfer: React.FC<Props> = props => {
    /**targetKey：穿梭框中已经移动到右侧的 key 数组 */
    const [targetKey, setTargetKey] = useState<any>([]);
    const [transferDataSource, setTransferDataSource] = useState<any>();

    function isChecked(selectedKeys: any, eventKey: any) {
        return selectedKeys.indexOf(eventKey) !== -1
    }

    /**根据穿梭框状态动态生成树形控件内容：将左侧被移动的选项禁选 */
    function generateTree(treeNodes: TreeData[], checkedKeys: any[]): TreeData[] {
        return treeNodes && treeNodes.map(({ children, ...item }: any) => {
            return {
                disabled: checkedKeys.includes(item.key),
                ...item,
                children: generateTree(children, checkedKeys),
            }
        });
    }

    function handleChange(keys: any[]) {
        setTargetKey(keys);
        props.onChange && props.onChange(keys);
    }

    useEffect(() => {
        const dataList: any[] = [];
        function flatten(list: any) {
            list.forEach((item: any) => {
                dataList.push(item);
                item.children && flatten(item.children);
            });
        }
        flatten(props.treeData)
        setTransferDataSource(dataList);

        props.value && setTargetKey(props.value);
    }, [props])

    return (
        <Transfer
            targetKeys={targetKey}
            dataSource={transferDataSource}
            className="tree-transfer"
            render={(item: any) => item.title}
            onChange={handleChange}
            showSelectAll={false}
        >
            {({ direction, onItemSelect, selectedKeys }) => {
                if (direction === 'left') {
                    const checkedKeys = [...selectedKeys, ...targetKey];
                    return (
                        <Tree
                            blockNode
                            checkable
                            checkStrictly
                            defaultExpandAll
                            checkedKeys={checkedKeys}
                            treeData={generateTree(props.treeData, targetKey)}
                            onCheck={(_, { node: { key } }: any) => {
                                onItemSelect(key, !isChecked(checkedKeys, key));
                            }}
                            onSelect={(_, { node: { key } }: any) => {
                                onItemSelect(key, !isChecked(checkedKeys, key));
                            }}
                        />
                    );
                }
            }}
        </Transfer>
    );
};

export default TreeTransfer;
